<template>
  <div class="edit-body">
    <div class="active-eidt-head">
      <index-head class="head-body"></index-head>
    </div>
    <div class="active-edit-body">
      <!-- 左侧 -->
      <div class="active-edit-left">
        <ul class="active-edit-menu">
          <li
            v-for="(item,key) in menu"
            :key="key"
            :class="menu_index == key ? 'active-edit-menu-item active' : 'active-edit-menu-item'"
            @click="changeMenu(key)"
          >
            <i :class="item.icon"></i>
            <span>{{item.name}}</span>
          </li>
        </ul>
      </div>
      <div class="active-edit-content">
        <div style="height:20px;"></div>
        <div class="edit-body-breadcrumb">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>{{menu[menu_index].name}}</el-breadcrumb-item>
          </el-breadcrumb>
          <!-- 返回页面 -->
          <el-button size="mini" @click=" returnhome">返回首页</el-button>
        </div>
        <!-- 右侧页面内容 -->
        <div>
          <!-- 数据分析 -->
          <div v-if="menu[menu_index].state == 0">
            <base-data :id="id"></base-data>
          </div>
          <!-- 信息编辑 -->
          <div v-if="menu[menu_index].state == 1">
            <edit-info :active_id="id"></edit-info>
          </div>
          <!-- 报名列表 -->
          <div v-if="menu[menu_index].state == 2">
            <user-list :type="active_base.type" :active_id="id"></user-list>
          </div>
          <!-- 订单列表 -->
          <div v-if="menu[menu_index].state == 3">
            <order-list :active_id="id" :type="active_base.type"></order-list>
          </div>
          <!-- 赛事成绩 -->
          <div v-if="menu[menu_index].state == 4 && active_base.type == 1">
            <result-match :active_id="id"></result-match>
          </div>
          <!-- 评论 -->
          <div v-if="menu[menu_index].state == 5">
            <eval-list :active_id="id"></eval-list>
          </div>
          <!-- 物资领取 -->
          <!-- <div v-if="menu_index == 6">
            <goods-list></goods-list>
          </div>-->
          <!-- 检录签到 -->
          <div v-if="menu[menu_index].state == 6">
            <!-- <sign-in :active_id="id"></sign-in> -->
            <sign-list :active_id="id"></sign-list>
          </div>
          <!-- 查看相册 -->
          <div v-if="menu[menu_index].state == 7">
            <album-list :active_id="id"></album-list>
          </div>
          <!-- 需求提交 -->
          <div v-if="menu[menu_index].state == 8">
            <add-needs :active_id="id"></add-needs>
          </div>
          <!-- 团报设置 -->
          <div v-if="menu[menu_index].state == 9 && active_base.type == 1">
            <team-sign :active_id="id"></team-sign>
          </div>
          <!-- 任务结果 -->
          <div v-if="menu[menu_index].state == 10 ">
            <active-result :active_id="id"></active-result>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import indexHead from "../home/head";
import baseData from "./edit/base-date.vue";
import userList from "./edit/user-list.vue";
import orderList from "./edit/order-list.vue";
import resultMatch from "./edit/result-match.vue";
import evalList from "./edit/eval-list.vue";
import goodsList from "./edit/goods-list.vue";
import signList from "./edit/sign-list.vue";
import albumList from "./edit/album-list.vue";
import editInfo from "./edit/edit-info.vue";
import addNeeds from "./edit/add-needs.vue";
import teamSign from "./edit/team-sign.vue";
import activeResult from "./edit/active-result.vue";

export default {
  components: {
    indexHead,
    baseData,
    userList,
    orderList,
    resultMatch,
    evalList,
    editInfo,
    // eslint-disable-next-line vue/no-unused-components
    goodsList,
    signList,
    albumList,
    addNeeds,
    teamSign,
    activeResult
  },
  data() {
    return {
      active_base: {
        type: 1
      },
      menu: [
        { name: "数据分析", icon: "el-icon-monitor", state: 0 },
        { name: "活动详情", icon: "el-icon-edit", state: 1 },
        { name: "报名列表", icon: "el-icon-user", state: 2 },
        { name: "订单列表", icon: "el-icon-document", state: 3 },
        { name: "赛事成绩", icon: "el-icon-trophy", state: 4 },
        { name: "评价列表", icon: "el-icon-time", state: 5 },
        // { name: "物资领取", icon: "el-icon-present" },
        { name: "签到列表", icon: "el-icon-check", state: 6 },

        { name: "查看相册", icon: "el-icon-camera", state: 7 },
        { name: "需求提交", icon: "el-icon-edit-outline", state: 8 },
        { name: "团报列表", icon: "el-icon-edit-outline", state: 9 },
        { name: "任务结果", icon: "el-icon-s-claim", state: 10 }
      ],
      menu_index: 0,
      id: this.$route.params.id
    };
  },
  mounted() {
    if (this.$route.query.edit) {
      this.menu_index = 1;
    }
  },
  methods: {
    returnhome() {
      this.$router.push({ path: "/stage" });
    },
    //改变菜单
    changeMenu(key) {
      // if (this.menu_index == 1 && key != 1) {
      //   this.$confirm(
      //     "离开页面的时候系统不会自动保存数据，请确定已保存修改?",
      //     "提示",
      //     {
      //       confirmButtonText: "离开",
      //       cancelButtonText: "取消",
      //       type: "warning"
      //     }
      //   )
      //     .then(() => {
      //       this.menu_index = key;
      //     })
      //     .catch(() => {});
      //   return false;
      // }
      this.menu_index = key;
    }
  }
};
</script>

<style scoped>
@import url("../../assets/css/active/edit/edit.css");
</style>